import React, { Component } from 'react'
import {bindActionCreators} from "redux"
import { Image ,SwipeCell,Button,Cell} from 'react-vant';
import {connect} from "react-redux"
import { message } from 'antd';
import * as action from "../../api/index"
export class ShopCar extends Component {
    info(){
        message.error('已经是0了，不能在减了');
    };
      
    add(id){
        console.log(this.props);
        this.props.addCount(id)
    }
    del(id){
        const data = this.props.shopCar.filter(item=>item.id===id)
        if (data[0].count<=0) {
            this.info()
            console.log(1111111111111);
        }else{
            this.props.delCount(id)
        }
    }

    OneCheckedBox(index,e){
        let obj ={
           check:e.target.checked,
           index
        }
        // debugger
        this.props.OneCheckBox(obj)
    }

    AllChecked(e){
        this.props.ALLCheckBox(e.target.checked)
    }

    delItem(index){
        this.props.delItem(index)
    }
    render() {
        console.log(this.props);
        let {shopCar,allPrice,allCheck} = this.props
        return (
            <div className="ShopCar">
                ShopCar
                <div className="Allchekd">
                    <span>全选：<input type="checkbox" checked={allCheck} onChange={this.AllChecked.bind(this)}/></span>
                    <span>总价：{allPrice}</span>
                </div>
                <div>
                    {
                        shopCar&&shopCar.map((item,index)=>{
                            return  <SwipeCell
                            key={index}
                            rightAction={
                                <>
                                <Button square type="danger" onClick={this.delItem.bind(this,index)}>
                                    删除
                                </Button>
                                </>
                            }
                            >
                            <div key={index} className="ShopCarItem">
                                <input type="checkbox" checked={item.checked} onChange={this.OneCheckedBox.bind(this,index)}/>
                                <Image lazyload width="100" height="100" src={item.img} />
                                <div>
                                    <p>id:{item.id}</p>
                                    <p>name:{item.name}</p>
                                    <p>price:{item.price}</p>
                                    <div style={{display:"flex"}}>
                                        <button  onClick={this.del.bind(this,item.id)}>---</button>
                                        <p style={{fontSize:"20px",color:"red"}}>count:{item.count}</p>
                                        <button onClick={this.add.bind(this,item.id)}>+++</button>
                                    </div>
                                
                                </div>
                            </div>
                        </SwipeCell>
                        })
                    }
                </div>
            </div>
        )
    }
}

const mapState = (state) =>{
    return {
        ...state.reduce
    }
}
export default connect(mapState,(dispatch)=>bindActionCreators(action,dispatch))(ShopCar)
